<template>
  <div class="callServicesDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">呼叫服务详情</x-header>
    <div class="topHolder"></div>
    <card>
      <div class="card-padding state" slot="content">
        <i class="iconfont" :class="[stateClass,stateTextClass]"></i>
        <br/>
        <span class="stateText">状态：<b :class="[stateTextClass]" v-text="stateText"></b></span>
      </div>
    </card>
    <group label-width="6em">
      <cell title="呼叫手机号" :value="callServiceInfo.PHONE"></cell>
      <cell title="呼叫房台号" :value="callServiceInfo.AREA + ' - ' + callServiceInfo.NUMBER + '（' + callServiceInfo.ROOM_PLATFORM_TYPE + '）'"></cell>
      <!--<cell title="呼叫单号" class="number" :value="callServiceInfo.CALLSERVICE_ID"></cell>-->
      <cell title="最新呼叫时间" :value="callServiceInfo.REQUEST_DATETIME"></cell>
      <cell title="呼叫类型" :value="getType(callServiceInfo.TYPE)"></cell>
      <cell title="呼叫细分类型" v-if="callServiceInfo.TYPE == 2" :value="callServiceInfo.DETAIL_TYPE"></cell>
      <cell title="最新处理信息" v-if="callServiceInfo.STATE == 1" :value="'[' + callServiceInfo.RESPONSER + ' - ' + callServiceInfo.response_DEPARTMENT + ']于' + callServiceInfo.RESPONSE_DATETIME + '响应请求'"></cell>
      <cell title="最新处理信息" v-if="callServiceInfo.STATE == 2" :value="'[' + callServiceInfo.RESPONSER + ' - ' + callServiceInfo.response_DEPARTMENT + ']于' + callServiceInfo.RESPONSE_DATETIME + '标记完成'"></cell>
      <cell title="呼叫备注" :value="callServiceInfo.REMARK"></cell>
    </group>
    <group title="呼叫响应列表：">
      <x-table :cell-bordered="false">
        <thead>
          <tr style="background-color: #F7F7F7">
            <th>呼叫次数</th>
            <th width="30%">呼叫时间</th>
            <th width="50%">响应人/时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in callServiceInfo.callDetails" :key="index">
            <td v-text="'第' + (index + 1) + '次'"></td>
            <td v-text="item.REQUEST_DATETIME"></td>
            <td v-if="item.STATE == 0">未响应</td>
            <td v-if="item.STATE == 1" v-text="'[' + item.RESPONSER + ' - ' + item.response_DEPARTMENT + ']于' + item.RESPONSE_DATETIME + '响应'"></td>
          </tr>
          <tr v-if="JSON.stringify(callServiceInfo) != '{}' && callServiceInfo.callDetails.length <= 0">
            <td colspan="4">
              <div class="listNoItem">暂无呼叫响应明细</div>
            </td>
          </tr>
        </tbody>
      </x-table>
    </group>
    <box gap="1rem 0.8rem">
      <x-button v-if="showBtnResponse" :gradients="['#FF5E3A', '#FF9500']" @click.native="response" :show-loading="loadingStatus" :disabled="loadingStatus" text="响应呼叫"></x-button>
      <x-button v-if="showBtnTagFinish" :gradients="['#1D62F0', '#19D5FD']" @click.native="tagFinish" :show-loading="loadingStatus" :disabled="loadingStatus" text="标记已完成"></x-button>
    </box>
    <br/>
  </div>
</template>

<script>
  import {Group, Cell, Card, XTable, Box, XButton } from 'vux'
  import {getCallServiceDetail,responseCallService,finishCallService} from "../../api";
  import {message,getLocalStorage} from "../../common/util";

  export default {
    name:'callServicesDetail',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:true,
        paramCallServiceId:this.$route.params.callServiceId,
        callServiceInfo:{},
        stateText:'',
        stateClass:'',
        stateTextClass:'',
        showBtnResponse:false,
        showBtnTagFinish:false
      }
    },
    components:{
      Group,
      Cell,
      Card,
      XTable,
      Box,
      XButton
    },
    computed:{

    },
    methods:{
      getState(state){
        switch (state) {
          case 0:this.stateText = '未响应';this.stateClass = 'icon-icon-';this.stateTextClass = 'noResponse';break
          case 1:this.stateText = '已响应';this.stateClass = 'icon-dengluchaoshi';this.stateTextClass = 'response';break
          case 2:this.stateText = '已完成';this.stateClass = 'icon-chenggong1';this.stateTextClass = 'complete';break
          default:this.stateText = '无状态';this.stateClass = '';this.stateTextClass = '';break
        }
      },
      getType(type){
        switch (type) {
          case 1:return '存酒';break
          case 2:return '服务';break
          case 3:return '投诉建议';break
          default:return '无类型';break
        }
      },
      response(){
        this.loadingStatus = true
        responseCallService(this.paramCallServiceId).then((res)=>{
          if(res.status == 'success'){
            message({message:'您已响应呼叫',type:'info'})
            this.$router.push({path:'/callServicesList'})
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('responseCallService error info:', res.msg)
          }
          this.loadingStatus = false
        }).catch((err)=>{console.log('responseCallService catch info:',err)})
      },
      tagFinish(){
        /*let nowTime = new Date().getTime(),theTime = '',minute = 1
        for(let item of this.callServiceInfo.callDetails){
          if(item.RESPONSER_ID == cookie.get('userId_sales')){
            theTime = new Date(item.RESPONSE_DATETIME).getTime()
          }
        }
        if(theTime + minute*60*1000 < nowTime){*/
          this.loadingStatus = true
          finishCallService(this.paramCallServiceId).then((res)=>{
            if(res.status == 'success'){
              message({message:'该呼叫已被您标记完成',type:'info'})
              this.$router.push({path:'/callServicesList'})
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('finishCallService error info:', res.msg)
            }
            this.loadingStatus = false
          }).catch((err)=>{console.log('finishCallService catch info:',err)})
        /*}else{
          message({message:'刚响应后' + minute + '分钟内不能标记完成',type:'error'})
        }*/
      },
      showBtn(){
        switch (this.callServiceInfo.STATE) {
          case 0:this.showBtnResponse = true;break
          case 1:
            this.callServiceInfo.callDetails.some(item =>{
              if(item.RESPONSER_ID == getLocalStorage('userId_sales_index' + sessionStorage.getItem('index'))){
                this.showBtnTagFinish = true
                return true
              }
            })
            /*for(let item of this.callServiceInfo.callDetails){
              if(item.RESPONSER_ID == getLocalStorage('userId_sales_index' + sessionStorage.getItem('index'))){
                this.showBtnTagFinish = true
              }
            }*/
            break
          case 2:break
          default:break
        }
      }
    },
    mounted(){
      getCallServiceDetail(this.paramCallServiceId).then((res)=>{
        if(res.status == 'success'){
          this.callServiceInfo = res.data
          console.log(this.callServiceInfo)
          this.getState(res.data.STATE)
          this.showBtn()
          this.loadingStatus = false
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getCallServiceDetail error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getCallServiceDetail catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .callServicesDetail{
    .state{
      text-align: center;
      .iconfont{
        font-size: 5rem;
        &.noResponse{color: #ff2623;}
        &.response{color: #ffca10;}
        &.complete{color: #0abd39;}
      }
      .stateText{
        display:inline-block;margin-top: 1rem;
        b{
          &.noResponse{color: #ff2623;}
          &.response{color: #ffca10;}
          &.complete{color: #0abd39;}
        }
      }
    }
  }
</style>
